import React, { Component } from 'react';
import { View, StyleSheet, ScrollView, Text, TextInput, TouchableOpacity, Image } from 'react-native';

import NavBar from '../../../components/PublicHeader';
import { Constant } from '../../../public/js/constant';
import getStorageValue from '../../../utils/getStorageValue';
import fetchWebApi from '../../../public/WebApi/fetchBase';
import { GET_USER_REMARK, POST_USER_UPDATE } from '../../../public/WebApi/mailListApi';
import Layer from '../../../utils/Layer';
export default class remarks extends Component {
  constructor(props) {
    super(props);
    this.state = {
      id: this.props.navigation.state.params.id,
      remarksName: '',
      remarkPhones: [],
      remarksDescribe: '',
      text: "填写电话号码",
      describeText: "添加更多备注信息",
      flag: false,
      nickName: '',
      status: true
    }
  }

  componentDidMount = () => {
    this.getRemark()
  };

  async getRemark() {
    const res = await fetchWebApi(GET_USER_REMARK, { token: await getStorageValue(Constant.TOKEN), id: this.state.id }, 'POST')
    console.log('########## getRemark');
    console.log(res);
    if (res.status == 200) {
      this.setState({
        remarksName: res.data[0].remarksName,
        remarkPhones: res.data[0].remarkPhones,
        remarksDescribe: res.data[0].remarksDescribe,
        nickName: res.data[0].nickName
      })

      if (this.state.remarkPhones != null) {
        if (this.state.remarkPhones[1] != null) {
          this.setState({
            flag: true
          })
        }
      }
    }
  }

  // 提交备注
  async addRemark() {
    const res = await fetchWebApi(POST_USER_UPDATE, {
      token: await getStorageValue(Constant.TOKEN),
      remarksName: this.state.remarksName == '' ? this.state.remarksName = null : this.state.remarksName,
      remarkPhones: this.state.remarkPhones,
      remarksDescribe: this.state.remarksDescribe,
      id: this.state.id
    }, 'POST')
    console.log('########### addRemark');
    console.log(res);
    if (res.status == 200) {

    }
  }

  render() {
    // 新增手机号
    let addPhone = this.state.flag ?
      <>
        <View style={styles.removephone}>
          <TouchableOpacity style={styles.remarks_img} onPress={() => {
            this.setState({
              flag: false
            })
            this.state.remarkPhones.splice(1, 1)
          }}>
            <Image source={require('../../../assets/images/introduces/removePhone.png')} />
          </TouchableOpacity>
          <TextInput
            onEndEditing={(value) => {
              let isPhone = /^1[3-9]\d{9}$/
              if (this.state.remarkPhones != "") {
                this.setState({
                  status: true
                })
                if (isPhone.test(value.nativeEvent.text)) {
                  this.state.remarkPhones[1] = value.nativeEvent.text
                } else {
                  this.setState({
                    status: false
                  })
                }
              }
              else {
                this.setState({
                  status: true
                })
              }
            }}
            style={styles.remarks_input}
            clearButtonMode="while-editing"
            clearTextOnFocus={true}
            placeholderTextColor="#000"
            placeholder={this.state.text}
            inlineImagePadding={40}
            keyboardType={'numeric'}
            maxLength={11}
          >{this.state.remarkPhones[1] == null ? null : this.state.remarkPhones[1]}</TextInput>
        </View>
      </> : null
    return (
      <View style={{ flex: 1 }}>
        <NavBar
          navigation={this.props.navigation}
          title={'备注'}
          right={'确定'}
          pressRight={() => {
            if (this.state.status) {
              this.addRemark()
              Layer.showMsg('修改成功')
              this.props.navigation.state.params.refresh2(this.state.remarksName == '' ? this.state.nickName : this.state.remarksName)
              this.props.navigation.goBack()
            } else {
              Layer.showMsg('请输入正确的手机号')
            }
          }} />
        <ScrollView style={styles.bodys}>
          {/* 设置备注名 */}
          <View style={styles.bodys_remarks}>
            <Text style={styles.remarks_text}>备注名</Text>
            <TextInput
              onChangeText={(value) => {
                this.state.remarksName = value
              }}
              style={styles.remarks_input}
              clearButtonMode="while-editing"
              placeholder={this.state.remarksName == null ? '请输入备注' : null}
              placeholderTextColor='#000'
            >{this.state.remarksName}</TextInput>
          </View>
          {/* 填写电话号码 */}
          <View style={styles.bodys_remarks}>
            <Text style={styles.remarks_text}>电话号码
              <Text style={styles.remarks_text2}>  (最多添加两个)</Text>
            </Text>
            <View style={styles.removephone}>
              <TouchableOpacity style={styles.remarks_img} onPress={() => {
              }}>
                <Image source={require('../../../assets/images/introduces/removePhone.png')} />
              </TouchableOpacity>
              <TextInput
                onChangeText={(value) => {
                  let isPhone = /^1[3-9]\d{9}$/
                  if (this.state.remarkPhones != "") {
                    if (isPhone.test(value)) {
                      this.setState({
                        status: true
                      })
                      this.state.remarkPhones = []
                      this.state.remarkPhones[0] = value
                    } else {
                      // Layer.showMsg('请输入正确的手机号')
                      this.setState({
                        status: false
                      })
                    }
                  } else {
                    this.setState({
                      status: true
                    })
                  }
                }}
                style={styles.remarks_input}
                clearButtonMode="while-editing"
                clearTextOnFocus={true}
                placeholderTextColor="#000"
                placeholder={this.state.text}
                inlineImagePadding={40}
                keyboardType={'numeric'}
                maxLength={11}
              >{this.state.remarkPhones == null ? null : this.state.remarkPhones[0]}</TextInput>
            </View>
            {addPhone}
            <TouchableOpacity style={styles.removephone} onPress={() => {
              this.setState({
                flag: true
              })


            }}>
              <View style={styles.remarks_img}>
                <Image source={require('../../../assets/images/introduces/addPhone.png')} />
              </View>
              <TextInput
                style={styles.remarks_input}
                clearButtonMode="while-editing"
                clearTextOnFocus={true}
                placeholderTextColor="black"
                placeholder="添加"
                inlineImagePadding={40}
                editable={false}
              />
            </TouchableOpacity>
          </View>
          {/* 描述 */}
          <View style={styles.bodys_remarks}>
            <Text style={styles.remarks_text}>描述</Text>
            <TextInput
              onSubmitEditing={(value) => {
              }}
              onChangeText={(value) => {
                this.state.remarksDescribe = value
              }}
              style={styles.remarks_input}
              clearButtonMode="while-editing"
              clearTextOnFocus={true}
              placeholder={this.state.describeText}
              placeholderTextColor='#000'
            >{this.state.remarksDescribe == null ? null : this.state.remarksDescribe}</TextInput>
          </View>
        </ScrollView >
      </View >
    );
  }
}
const styles = StyleSheet.create({
  container: {
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'center',
    height: 32,
    backgroundColor: 'transparent',
  },
  bodys: {
    backgroundColor: '#f2f2f2',
  },
  bodys_remarks: {
    display: 'flex',
    flexDirection: 'column',
  },
  remarks_text: {
    color: '#0000006E',
    padding: 10,
  },
  remarks_text2: {
    color: '#0000006E',
    padding: 10,
    fontSize: 12
  },
  removephone: {
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'flex-start',
    backgroundColor: 'white',
    paddingLeft: 10
  },
  remarks_input: {
    paddingLeft: 15,
    width: '100%',
    backgroundColor: 'white',
    borderBottomWidth: 1,
    borderBottomColor: '#f2f2f2',
  },
  remarks_img: {
    alignSelf: 'center'
  }
});
